<template>
  <el-row class="home">
    <el-col :span="8" style="margin-top: 20px;">
      <!-- 用户信息 -->
      <el-card shadow="hover" style="background: #dfe9ef;">
        <div class="user" slot="header" style="margin: 0 auto;">
          <img class="headImg" :src="userImg" />
          <div class="userInfo">
            <p class="name">Admin</p>
            <p class="access">超级管理员</p>
          </div>
        </div>
        <div class="login-info">
          <p>上次登录时间：<span>2021-12-27 16:23:01</span></p>
          <p>上次登录地点：<span>湖南长沙</span></p>
        </div>
      </el-card>
      <!-- 统计信息 -->
      <div class="num" v-for="numItem in countData" style="display: flex;padding: 0;flex-direction:row;">
        <el-card shadow="hover" v-for="item in numItem" :key="item.name"
          style="width: 100%;height: 100%;margin: 5px;background: #d86ac6;">
          <div slot="header" class="clearfix" style="">
            <span>{{item.name}}</span>
          </div>
          <p class="num">{{item.value}}</p>
        </el-card>
      </div>
    </el-col>

    <el-col :span="16">

      <!-- 列表信息 -->
      <el-card class="tableShow" shadow="hover">
        <div slot="header"><span>列表信息</span></div>
        <el-table :data="logsData" border height="310px">
          <el-table-column show-overflow-tooltip v-for="(val,key) in logsLable" :key="key" :prop="key" :label="val">

          </el-table-column>
        </el-table>
      </el-card>
      <!-- 折线图 -->
      <el-card shadow="hover" style="margin: 15px;height: 360px;">
        <div id="main" style="height: 100%;"></div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
  import * as echarts from 'echarts';
  export default {
    data() {
      return {
        userImg: require('../../assets/image/2.jpg'),
        logsData: [{
            logId: 100,
            userId: 10,
            operation: "getuserId",
            method: "GET",
            params: "{'userId':11}",
            time: 233,
            ip: "127.0.0.1",
            createTime: "2021-12-27 22:14:01",
          },
          {
            logId: 100,
            userId: 10,
            operation: "getuserId",
            method: "GET",
            params: "{'userId':11}",
            time: 233,
            ip: "127.0.0.1",
            createTime: "2021-12-27 22:14:01",
          },
          {
            logId: 100,
            userId: 10,
            operation: "getuserId",
            method: "GET",
            params: "{'userId':11}",
            time: 233,
            ip: "127.0.0.1",
            createTime: "2021-12-27 22:14:01",
          },
          {
            logId: 100,
            userId: 10,
            operation: "getuserId",
            method: "GET",
            params: "{'userId':11}",
            time: 233,
            ip: "127.0.0.1",
            createTime: "2021-12-27 22:14:01",
          },
          {
            logId: 100,
            userId: 10,
            operation: "getuserId",
            method: "GET",
            params: "{'userId':11}",
            time: 233,
            ip: "127.0.0.1",
            createTime: "2021-12-27 22:14:01",
          },
          {
            logId: 100,
            userId: 10,
            operation: "getuserId",
            method: "GET",
            params: "{'userId':11}",
            time: 233,
            ip: "127.0.0.1",
            createTime: "2021-12-27 22:14:01",
          },
          {
            logId: 100,
            userId: 10,
            operation: "getuserId",
            method: "GET",
            params: "{'userId':11}",
            time: 233,
            ip: "127.0.0.1",
            createTime: "2021-12-27 22:14:01",
          },
          {
            logId: 100,
            userId: 10,
            operation: "getuserId",
            method: "GET",
            params: "{'userId':11}",
            time: 233,
            ip: "127.0.0.1",
            createTime: "2021-12-27 22:14:01",
          },
        ],
        logsLable: {
          logId: "日志Id",
          userId: "用户Id",
          operation: "执行操作",
          method: "请求方法",
          params: "参数",
          time: "执行时间(mg)",
          ip: "IP地址",
          createTime: "创建时间",
        },
        countData: [
          [{
              name: "今日访问量",
              value: 1222,
              icon: "edit",
              color: "#2ec7c9",
            },
            {
              name: "昨日访问量",
              value: 2222,
              icon: "edit",
              color: "#2ec7c9",
            },
            {
              name: "同比增长",
              value: 2222,
              icon: "edit",
              color: "#2ec7c9",
            },
          ],
          [{
              name: "月访问量",
              value: 1222,
              icon: "edit",
              color: "#2ec7c9",
            },
            {
              name: "年访问量",
              value: 2222,
              icon: "edit",
              color: "#2ec7c9",
            },
            {
              name: "在线人数",
              value: 2222,
              icon: "edit",
              color: "#2ec7c9",
            },
          ]
        ],
        echartsData: {
          order: {
            legend: {
              //图例文字眼色
              textStyle: {
                color: "#333",
              },
            },
          },
          grid: {
            left: "20%",
          },
          //提示框
          tooltip: {
            trigger: "axis",
          },
          xAxis: {
            type: "category", //类目轴
            data: [],
            axisLine: {
              lineStyle: {
                color: "#17b3a3",
              },
            },
            axisLable: {
              interval: 0,
              color: "#333",
            },
            yAxis: [{
              type: "value",
              axisLine: {
                lineStyle: {
                  color: "#17b3a3",
                },
              },
            }, ],
            color: ["#2ec7c9", "#331231", "#123213", "#123", "#312411", "#312342"],
            series: [],
          },
        },

      }
    },
    methods: {
      createBrokenLineTable() {
        var myChart = echarts.init(document.getElementById('main'));
        echarts.init(document.getElementById('main'));
        // 绘制图表
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            },
            {
              data: [100, 220, 214, 208, 125, 137, 240],
              type: 'line'
            },
          ]
        });
        myChart.resize({
          width: 1000,
          height: 360
        });
      }
    },
    created() {},
    mounted() {
      this.createBrokenLineTable();

    },
  }
</script>
<style lang="scss" scoped>
  .headImg {
    width: auto;
    height: auto;
    max-width: 150px;
    max-height: 150px;
    border-radius: 50%;
  }

  .el-card {
    margin-bottom: 20px;
  }

  .tableShow {
    background: #a092ef;
    margin-top: 20px;
    margin-left: 20px;
  }
</style>
